<template>
  <div>
    <el-dialog
      title="关联分类"
      :visible.sync="associationVisible"
      :close-on-click-modal="false"
      width="30%"
    >
      <el-button
        class="addButton"
        @click="handleAdd"
        icon="el-icon-circle-plus"
      ></el-button>
      <el-table
        :data="categoryBrandRelation"
        :stripe="true"
        :highlight-current-row="true"
        tooltip-effect="dark"
        class="brandTable"
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <el-table-column
          label="id"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column
          prop="brandName"
          label="品牌名"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="catelogName"
          label="分类名"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            ><i class="el-icon-delete"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="associationVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加分类关系"
      :visible.sync="categoryVisible"
      width="20%"
    >
      <el-form label-width="100px">
        <el-form-item label="所属分类">
          <el-cascader
            v-model="value"
            :options="options"
            :props="catCascade"
            placeholder="试试搜索：手机"
            filterable
            style="width: 80%"
          >
          </el-cascader>
        </el-form-item>

      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="categoryVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="hadleCategoryAssociation"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      associationVisible: false, // 控制关联分类对话框是否显示
      categoryVisible: false, // 控制添加分类对话框是否显示
      categoryBrandRelation: [], // 分类、品牌关联数据
      brandId: '', // 保存品牌 id
      categoryId: '',
      catCascade: { // 级联属性分配
        expandTrigger: 'hover',
        value: 'catId',
        label: 'name',
        children: 'children'
      },
      value: [],
      options: [] // 级联数据源
    }
  },
  methods: {
    // 点击关联按钮触发的对话框
    init (index, row) {
      this.associationVisible = true
      this.brandId = row.brandId
      this.getCategoryBrandRelationByBrandId()
    },
    // 添加事件
    handleAdd () {
      this.categoryVisible = true
    },
    // 删除事件
    handleDelete (index, row) {
      let ids = [row.id]
      this.$confirm(`删除此关联, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/product/categorybrandrelation/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getCategoryBrandRelationByBrandId()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 级联选择框选中完成添加触发
    hadleCategoryAssociation () {
      this.categoryId = this.value[this.value.length - 1]
      let categoryBrandRelation = {
        brandId: this.brandId,
        catelogId: this.categoryId
      }
      this.$http({
        url: this.$http.adornUrl('/product/categorybrandrelation/save'),
        method: 'post',
        data: this.$http.adornData(categoryBrandRelation, false)
      }).then(({
        data
      }) => {
        this.$message({
          type: 'success',
          message: '组保存成功!'
        })
        this.categoryVisible = false // 关闭对话框
        this.getCategoryBrandRelationByBrandId() // 刷新数据
      })
    },
    // 给级联选择框赋值
    getCategoryOptions () {
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get'
        // params: this.$http.adornParams({

        // })
      }).then(({ data }) => {
        this.options = data.data
      })
    },
    // 获取品牌分类关联关系数据
    getCategoryBrandRelationByBrandId () {
      this.$http({
        url: this.$http.adornUrl('/product/categorybrandrelation/list'),
        method: 'get',
        params: this.$http.adornParams({
          // pageSize: size,
          // currentPage: page,
          // input: input
          brandId: this.brandId
        })
      }).then(({
        data
      }) => {
        this.categoryBrandRelation = data.data
      })
    }
  },
  created () {
    this.getCategoryOptions()
  }
}
</script>
<style>
.addButton {
  background: #25c6a2;
  color: #fff;
  font-size: 16px;
}
.brandTable {
  width: 100%;
  margin-top: 15px;
}
</style>